<script setup>
import { onMounted, ref } from 'vue'
import { userList, delUserList, resetPwd } from '@/api/users.js'
import { message } from 'ant-design-vue'
import AddUser from './components/add-user.vue'

defineOptions({
  name: 'StaffManage'
})
const columns = ref([
  {
    title: '序号',
    customRender: ({ index }) =>
      `${+index + 1 + pageParams.value.pageSize * (pageParams.value.page - 1)}`
  },
  { title: '员工姓名', dataIndex: 'name' },
  { title: '登录账号', dataIndex: 'userName' },
  { title: '联系方式', dataIndex: 'phonenumber' },
  { title: '角色', dataIndex: 'roleName' },
  { title: '状态', dataIndex: 'status' },
  { title: '添加时间', dataIndex: 'createTime' },
  { title: '操作', dataIndex: 'operate' }
])
const list = ref([])
// 弹框
const showDialog = ref(false)
// 获取数据
const userListAPI = async () => {
  const res = await userList(pageParams.value)
  list.value = res.data.rows
  totalCount.value = res.data.total
  console.log(res)
}
// 查询
const inquire = () => {
  userListAPI()
}
// 删除员工
const deluserAPI = async (id) => {
  await delUserList(id)
  message.success('删除告警成功')
  userListAPI()
}
// 重置密码
const resetPwdAPI = async (id) => {
  await resetPwd(id)
  message.success('重置密码成功')
  userListAPI()
}
// 页码总数
const totalCount = ref(0)
const showTotal = () => {
  return `总共${totalCount.value}条`
}
const pageParams = ref({
  page: 1,
  pageSize: 10,
  name: ''
})
const changePage = (nwePage) => {
  pageParams.value.page = nwePage
}
// 编辑用户
const currentId = ref(null)
const addUserRef = ref(null)
const editUser = (id) => {
  showDialog.value = true //显示弹层
  currentId.value = id
  addUserRef.value?.getUserDetail(id)
}
onMounted(() => {
  // 首页渲染完成
  userListAPI()
})
</script>
<template>
  <a-card class="content">
    <!-- 搜索框 -->
    <div class="search">
      <a-form>
        <a-row type="flex" justify="start" :gutter="16">
          <a-col>
            <a-form-item label="员工姓名" style="width: 100%">
              <a-input placeholder="请输入员工姓名" v-model:value="pageParams.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col>
            <a-button type="primary" @click="inquire">查询</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 添加按钮 -->
    <div class="btn">
      <a-button type="primary" @click="showDialog = true">添加员工</a-button>
    </div>
    <!-- 表单 -->
    <div class="table">
      <a-table
        :dataSource="list"
        :columns="columns"
        :pagination="{
          total: totalCount,
          'show-total': showTotal,
          showQuickJumper: true,
          current: pageParams.page,
          pageSize: pageParams.pageSize,
          onChange: changePage
        }"
      >
        <!-- 操作 -->
        <template #bodyCell="{ column, record }">
          <!-- <a-space> -->
          <a-space v-if="column.dataIndex === 'operate'">
            <a-button type="link" @click="editUser(record.id)">编辑</a-button>
            <a-popconfirm
              title="删除员工后，该员工账号将无法登录，是否删除?"
              @confirm="deluserAPI(record.id)"
            >
              <a-button type="link">删除</a-button>
            </a-popconfirm>
            <a-popconfirm title="确定将密码 重置为“123456?" @confirm="resetPwdAPI(record.id)">
              <a-button type="link">重置密码</a-button>
            </a-popconfirm>
          </a-space>
          <template v-if="column.dataIndex === 'status'">
            {{ record.status === 0 ? '未启用' : '启用' }}
          </template>
        </template>
      </a-table>
    </div>
  </a-card>
  <!-- 监听子组件弹框的事件 -->
  <add-user
    ref="addUserRef"
    v-model:showDialog="showDialog"
    @addSuccess="userListAPI"
    v-model:id="currentId"
    @clearId="currentId = null"
  ></add-user>
</template>
<style>
.content {
  margin-top: 20px;
  margin-left: 25px;
}
.search {
  border-bottom: 1px solid rgb(227, 227, 227, 0.9);
}
.table {
  margin-top: 20px;
}
.btn {
  margin-top: 20px;
}
</style>
